<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .static {
            width: 160px;
            height: 160px;
            text-align: center;
            line-height: 160px;
            font-size: 30px;
        }

        .a {
            background: darkblue;
        }

        .b {
            border-radius: 50%;
        }

        .c {
            border: 4px solid darkred;
        }

        .main {
            margin: 0 auto;
            width: 360px;
        }

        .nav {
            width: 360px;
            display: flex;
            justify-content: space-between;
            margin: 10px 0;
        }

        .nav-item {
            width: 100px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            background: #f50;
            color: #fff;
            border-radius: 8px;
            cursor: pointer;
        }

        .nav-active {
            background: chartreuse;
            color: crimson;
        }

        .box {
            width: 360px;
            height: 360px;
        }

        .box-item {
            width: 360px;
            height: 360px;
            background: chartreuse;
            color: crimson;
            font-size: 30px;
            text-align: center;
            line-height: 360px;
            border-radius: 20px;
        }
    </style>
</head>

<body>
    <div id="app">
        <h2>{{title }}</h2>
        <div v-if="false">
            <div class="static a b c ">class切换1</div>
            <div class="static" :class="'a b'">2</div>
            <div class="static" v-bind:class="active">最常见</div>
            <div class="static" :class="classList">4</div>
            <div class="static" :class="classList">5</div>
            <div class="static" :class="{a:flagA,b:flagB,c:flagC}">6</div>
            <div class="static" :class="classObj">7</div>
            <div class="static" style="background:chartreuse;color:#fff;">8</div>
            <div class="static" :style="{ background:'#123456',color:'red',fontSize:60+'px',borderRadius:'50%' }">99
            </div>
            <div class="static" :style="styleobj">100</div>
        </div>
        <div class="main">
            <div class="nav">
                <div @click="changeCurrent(0) " class="nav-item" :class="current==0?'nav-active':'' ">日收益</div>
                <div @click="changeCurrent(1) " class="nav-item" :class="current==1?'nav-active':'' ">月收益</div>
                <div @click="changeCurrent(2) " class="nav-item" :class="current==2?'nav-active':'' ">年收益</div>
            </div>
            <div class="box">
                <div class="box-item" :style="{display:current==0?'block':'none'}">
                    日收益 - 内容板块 - 1
                </div>
                <div class="box-item" :style="{display:current==1?'block':'none'}">
                    月收益 - 内容板块 - 2
                </div>
                <div class="box-item" :style="{display:current==2?'block':'none'}">
                    年收益 - 内容板块 -3
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    const vm = new Vue({
        data: {
            title: " class && style 绑定", active: "c", classList: ["b", "c"], flagA: true, flagB: false, flagC: true,
            classObj: { a: true, b: false, c: false }, styleobj: {
                backgroundColor: '#f50', color: "#0f0",
                border: "6px solod red"
            }, current: 0
        }, methods: { changeCurrent(current) { this.current = current } },
        mounted() { document.getElementsByTagName("title")[0].innerHTML = this.title }
    }).$mount("#app")</script>

</html>